* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



.all-backgrond {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../../assets/R-C.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -11;
    opacity: 0.4;
}



.header-btns {
    background-color: wheat;


    .el-select,
    .el-input {
        width: 200px;
        -webkit-app-region: no-drag;
    }
}


.music-page {
    z-index: 11111;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: space-evently;


    .left-navigation {
        width: 10em;
        height: 100%;
        border-right: 1px solid rgba(0, 0, 0, 0.4);

        #left-header-info {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80px;
            border-bottom: 1px solid wheat;

            svg {
                width: 50px;
                height: 50px;
            }
        }

        #left-menus {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 270px;
            text-align: center;
            line-height: 50px;

            #menu-items {
                height: 50px;
                margin-top: 5px;
                transition: background-color 0.3s ease-in-out;

                &:hover {
                    background-color: rgba(0, 0, 0, 0.2);
                    cursor: pointer;
                }
            }
        }

        #footer-tools {
            position: fixed;
            margin-top: 230px;
            width: 138px;
            height: 50px;

            svg {
                width: 25px;
                height: 25px;
            }

            #svg-icons {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
            }
        }
    }

    .container {
        .header-dispose-btns {
            position: fixed;
            top: -10px;
            width: 1060px;
            height: 40px;
            margin-top: 7px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.4);

            #basic-btns {
                -webkit-app-region: no-drag;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                width: 100px;

                svg {
                    width: 20px;
                    height: 20px;
                }
            }

            #filter-input {
                -webkit-app-region: no-drag;
                display: flex;
                margin-left: 20px;

                .el-input {
                    width: 300px;
                    border-radius: 8px;
                }

                ::v-deep .el-input__wrapper {
                    background-color: rgba(0, 0, 0, 0.1);
                    border: none
                }
            }

            #window-btns {
                margin-left: 440px;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                width: 200px;

                svg {
                    width: 30px;
                    height: 30px;
                }
            }
        }


        #main-container {
            margin-top: 35px;
            width: 1060px;
            height: 563px;

            .music-list {
                height: 100%;
                width: 100%;

                .header-title {
                    display: grid;
                    grid-template-columns: 1fr 0.9fr;
                    text-align: center;
                    padding: 5px 165px;
                    height: 30px;
                    // background-color: red;
                }

                .list {
                    height: 94.7%;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.4);


                    .music-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                        margin-top: 3px;
                        height: 40px;
                        transition: backgroundColor 0.3s ease-in-out;

                        &:hover {
                            background-color: rgba(0, 0, 0, 0.1);
                        }

                        #songName,
                        #singer,
                        #songDisposeBtns {
                            width: 100px;
                            height: 100%;
                            text-align: center;
                            line-height: 40px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100px;
                        }

                        #songName {
                            display: fixed;
                            // margin-left: 10px;
                            // align-items: flex-start;
                            width: 180px;
                            text-indent: 10px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;

                            svg {
                                width: 20px;
                                height: 20px;
                            }
                        }

                        #singer {
                            display: block;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        #songDisposeBtns {
                            justify-content: space-evenly;
                        }

                        .extra-content {
                            position: relative;
                            width: 70px;
                            height: 35px;
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;

                            svg {
                                width: 25px;
                                height: 25px;
                            }
                        }
                    }
                }



            }

            .title {
                display: grid;
                grid-template-columns: 1.5fr 1fr;
                text-indent: 100px;
                line-height: 30px;
                // gap: 20px;
                height: 30px;
            }

            .like-music-list {
                height: 100%;

                #list-items {
                    height: 40px;
                    margin-top: 7px;

                    #basic-info {
                        display: grid;
                        grid-template-columns: 1.5fr 1fr;


                        .grid-container {
                            display: grid;
                            grid-template-columns: 1fr 1fr;


                            .item-1 {
                                grid-column: 1;
                            }

                            .item-2 {
                                grid-column: 2;
                            }
                        }

                        .svgs {
                            width: 100px;
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        }

                        svg {
                            width: 25px;
                            height: 25px;
                        }

                        p {
                            white-space: nowrap;
                            text-wrap: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 16px;
                            text-align: center;
                            height: 40px;
                            width: 300px;
                            line-height: 40px;
                        }
                    }
                }
            }

            .play-history-music {
                height: 100%;

                #history-items {
                    height: 40px;
                    margin-top: 7px;

                    #basic-info {
                        display: grid;
                        grid-template-columns: 1.5fr 1fr;

                        .grid-container {
                            display: grid;
                            grid-template-columns: 1fr 1fr;


                            .item-1 {
                                grid-column: 1;
                            }

                            .item-2 {
                                grid-column: 2;
                            }

                        }

                        .svgs {
                            width: 100px;
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        }

                        svg {
                            width: 25px;
                            height: 25px;
                        }

                        p {
                            white-space: nowrap;
                            text-wrap: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 16px;
                            text-align: center;
                            height: 40px;
                            width: 300px;
                            line-height: 40px;
                        }

                    }
                }
            }
        }

        .footer-dispose-btns {
            height: 8.4%;
            width: 1060px;
            border-top: 1px solid rgba(0, 0, 0, 0.3);

            .music-basic-info {
                height: 100%;
                width: 100px;
                max-width: 110px;
                line-height: 50px;
                text-wrap: nowrap;
                white-space: no-wrap;
                text-overflow: ellipsis;
                overflow: hidden;
                // background-color: darkcyan;
            }

            .control-btns {
                height: 100%;
                // background-color: wheat;

                #btns {
                    height: 100%;
                    width: 300px;
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    // background-color: red;

                    svg {
                        width: 40px;
                        height: 40px;
                    }
                }
            }

            .music-progress-bar {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                width: 180px;

                .el-slider {
                    width: 130px;
                }

                #volume-slider {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    margin-top: -170px;
                    margin-left: 130px;
                    width: 50px;
                    height: 150px;
                    border-radius: 3px;
                    background-color: rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(0, 0, 0, 0.5);
                }

                svg {
                    width: 20px;
                    height: 20px;
                }
            }

            .music-tail-btns {
                height: 100%;
                width: 100px;
                // background-color: wheat;

                svg {
                    width: 35px;
                    height: 35px;
                }
            }
        }
    }



    svg {
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }

    svg:hover {
        transform: scale(0.9);
    }
}


.el-drawer {
    .custom-drawer-header {
        display: flex;
        align-items: center;

        #music-basic-info {
            margin-left: 410px;
            // display: flex;
            // align-items: center;
            text-align: center;
            line-height: 50px;
            text-wrap: nowrap;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 300px;
            height: 50px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 3px;
        }

        svg {
            width: 30px;
            height: 30px;
        }
    }

    .music-lyrics-info {
        height: 91%;
        border-radius: 3px;
    }
}